<template>
  <!-- 定义组件 -->
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
  >
    <!-- 左侧内容 -->
    <el-col>
      <span>{{ treeNode.name }}</span>
    </el-col>
    <!-- 头部右侧内容 -->
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col>{{ treeNode.manager }}</el-col>
        <!-- 下拉菜单 -->
        <el-col>
          <el-dropdown @command="operateDepts">
            <!-- 内容 -->
            <span>操作 <i class="el-icon-arrow-down"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit"
                >编辑部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!isRoot" command="del"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 引入删除的接口
import {delDepartments} from '@/api/departments'
export default {
  name: "HrsaasTreeTools",
  props: {
    // 定义一个props 可以用数组来接受数据 也可以用对象来接受
    treeNode: {
      type: Object, //对象类型
      required: true, //要求使用当前组件必须 传递treeNode属性 如果不传 就会报错。
    },
    isRoot: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  directives: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 下拉菜单的点击事件 点击编辑 删除 新增时触发
    operateDepts(type) {
      if (type === "add") {
        // 添加子部门
        // alert("添加");
        // 在当前电机的部门下 添加子部门=》 this.treeNode 就是当前点击的部门
        this.$emit('addDepts', this.treeNode); //触发自定义事件 告诉父组件 显示弹层

      } else if (type === "edit") {
        // alert("编辑");
        // 编辑和添加使用的是一个弹出层
        this.$emit('editDepts', this.treeNode ); //触发自定义事件 点击谁 编辑谁 this.treeNode当前点击的节点
      } else {
        // 弹出确认框 点击确认时 进入.then成功之后的回调 点击取消进入catch 捕获错误的消息 或者失败的回调
        this.$confirm("您确定要删除该部门吗？").then(()=>{
          // alert("删除");
          // 调用删除的接口 传递当前的id
          return delDepartments(this.treeNode.id)
        }).then(() => {
          // 只需要 等到成功的时候 调用接口删除了 后端数据变化了 但是前段没变 重新获取
          this.$emit('delDepts') //触发自定义事件
          this.$message.success('删除部门成功') // 成功的消息
        })
        
      }
    },
  },
};
</script>

<style scoped>
</style>

